<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<title>CSS 3D转换</title>
    <script src="./prefixfree.js"></script>
	<style>
		/*
				旋转每个面都有一个3d 坐标系

				旋转的中心点正中心


		*/
		
		body {
			margin: 0;
			padding: 0;
			background-color: #F7F7F7;
		}
		
		.box {
			width: 200px;
			height: 200px;
			position: relative;
			margin: 100px auto;
			transform: rotateX(30deg) rotateY(30deg);
			transform-style: preserve-3d;
			opacity: 0.5;
		}
		
		.front,
		.back,
		.left,
		.right,
		.top,
		.bottom {
			width: 200px;
			height: 200px;
			position: absolute;
			left: 0;
			bottom: 0;
		}
		
		.left {
			background: lightgray;
			transform: rotateY(90deg) translateZ(-100px);
		}
		
		.right {
			background: pink;
			transform: rotateY(90deg) translateZ(100px);
		}
		
		.front {
			background: lightgreen;
			transform: rotateY(0deg) translateZ(100px);
		}
		
		.back {
			background: lightblue;
			transform: rotateY(0deg) translateZ(-100px);
		}
		
		.top {
			background: lightyellow;
			transform: rotateX(90deg) translateZ(100px);
		}
		
		.bottom {
			background: lightsalmon;
			transform: rotateX(90deg) translateZ(-100px);
		}
	</style>
</head>

<body>
	<div class="box">
		<div class="front">front</div>
		<div class="back">back</div>
		<div class="left">left</div>
		<div class="right">right</div>
		<div class="top">top</div>
		<div class="bottom">bottom</div>
	</div>
</body>

</html>